<div class="main">
	<div class="view-header">
		<h1 class="logo">
			<a href="#/index">True.Charts</a>
		</h1>
		<ul class="nav-function">
			<li ng-click="event.addData()">
				<a>数据源</a>
			</li>
		</ul>
		<ul class="nav-href">
			<li><a href="#/save">保存</a></li>
			<li><a href="javascript:;" chart-fabu="1">发布</a></li>
		</ul>
	</div>
	<div class="chart-left">
		<div class="chart-data-info">
			<h5 class="h5-title">工作表</h5>
			<p class="title-desc" style="height: auto;">
				<select id="db" style="width: 100%;padding: 3px 6px;outline: 0;">
					<option value="">-</option>
				</select>
				<select id="vw" style="width: 100%;padding: 3px 6px;outline: 0;">
					<option value="">-</option>
				</select>
			</p>
		</div>
		<div class="chart-right-margin">
			<h5 class="h5-title">字段</h5>
			<div class="field-list">
				<ul>
					<li ng-repeat="item in data.fieldDate" ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone' ,appendTo:'body'}" ng-model="data.fieldDate" jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep',onStop:'stopDragField()'}">
						<i class="bdp-icon" ng-class="{'ico-type-string': item.data_type == 'string'}"></i>
						<span>{{item.title}}</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<style type="text/css">
		.jsFd input[type=range]{
			margin-top: 9px;
			height: 25px;
			outline: 0;
			margin-right: 20px;
		}
		.jsFd div label{
			min-width: 65px;
			height: 25px;
			line-height: 25px;
			vertical-align: top;
			margin-top: 9px;
    		display: inline-block;
    		*display: inline;
    		*zoom: 1;
		}
		.jsFd input[type=number]{
			margin-top: 9px;
			height: 25px;
			outline: 0;
			width: 60px;
			padding: 0 0 0 5px;
			vertical-align: top;
    		display: inline-block;
    		*display: inline;
    		*zoom: 1;
		}
	</style>
	<script type="text/javascript">
		function fdOnInput(obj){
			var $td = $(obj);
			$td.prev('label').find('.jsNum').html($td.val());
		}
	</script>
	<div class="chart-main">
		<div class="chart-args">
			<div class="row">
				<span class="fl axis-head">维度</span>
				<div class="drag-target-inner">
					<ul data-drop="true" ng-model='data.chart_x' jqyoui-droppable="{multiple:true}">
			            <li ng-repeat="item in data.chart_x" ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="data.chart_x" jqyoui-draggable="{index: {{$index}},animate:true}">
			            	<span class="tag">{{item.title}}</span>
			            </li>
					</ul>
				</div>
			</div>
			<div class="row">
				<span class="fl axis-head">数值</span>
				<div class="drag-target-inner">
					<ul data-drop="true" ng-model='data.chart_y' jqyoui-droppable="{multiple:true}">
			            <li ng-repeat="item in data.chart_y track by $index" ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="data.chart_y" jqyoui-draggable="{index: {{$index}},animate:true}">
			            	<span class="tag">{{item.title}}</span>
			            </li>
					</ul>
				</div>
			</div>
			<div class="row jsFd" style="display: none;">
				<span class="fl axis-head">临界值</span>
				<div>
					<label for="range1">[正常<span class="jsNum">33</span>%]</label>
					<input type="range" name="" id="range1" value="33" min="0" max="100" step="1" oninput="fdOnInput(this)" />
					<label for="range2">[预警<span class="jsNum">67</span>%]</label>
					<input type="range" name="" id="range2" value="67" min="0" max="100" step="1" oninput="fdOnInput(this)" />
					<label for="range3" style="min-width: 45px;">[预期值]</label>
					<input type="number" name="" id="range3" value="" />
				</div>
			</div>
		</div>
		<div class="chart_box">
			<div class="chart-left-side">
				<div class="filter-layer">
					<div class="hd">
				        <p>筛选器</p>
				    </div>
				    <div class="bd" data-drop="true" ng-model='data.searchData' jqyoui-droppable="{multiple:true}">
				    	<p class="no-filter">拖拽字段到这里<br>进行筛选</p>
				    	<ul >
				            <li ng-repeat="item in data.searchData track by $index" ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="data.searchData" jqyoui-draggable="{index: {{$index}},animate:true}">
				            	<span class="tag">{{item.title}}</span>
				            	<span class="tag-edit" ng-click="event.showDialog()"></span>
				            	<span class="tag-down" ng-click="event.getFilterRange()"></span>
				            	<div class="filter_range hide">
				            		<ul>
				            			<li>包含下列选项</li>
				            			<li>何中1</li>
				            		</ul>
				            	</div>
				            </li>
						</ul>
				    </div>
				</div>
			</div>
			<div id="chartBox">
				<div class="chart" id="chart">
					<p ng-hide="$scope.data.charts">当前图表无数据</p>
				</div>
			</div>
		</div>
	</div>
	<div class="chart-right">
		<div class="chart-title block">
			<div class="hd">图表标题</div>
			<div class="bd">
                <input type="text" class="input-text-block" placeholder="未命名图表">
            </div>
		</div>
		<div class="chart-type block">
			<div class="hd">图表类型</div>
			<div class="bd">
				<ul>
					<li ng-repeat="type in data.chartType">
						<a ng-click="event.switchChartType($index,type.type,$event)">
							<img src="{{type.icon}}" title="{{type.title}}">
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div id="ngdialog" class="ngdialog">
		<div class="ngdialog-content">
			<div class="ngdialog-title">编辑筛选项</div>
			<span class="ngdialog-cancel" ng-click="event.closeThisDialog()"></span>
			<div class="ngdialog-message">
				<div class="filter-type-part">
					<label>
						<span>
							<input type="radio" name="a" checked="checked">
						</span>
						<span>精确筛选</span>
					</label>
					<label>
						<span>
							<input type="radio" name="a">
						</span>
						<span>条件筛选</span>
					</label>
					<label>
						<span>
							<input type="radio"  name="a">
						</span>
						<span>表达式</span>
					</label>
				</div>
				<div class="bg-block clearfix">
					<div class="search-list">
						<p class="block-head">人员</p>
						<div class="query-box">
							<input type="text" class="query-text" placeholder="查找...">
							<a class="bdp-icon-wrap query-btn"></a>
						</div>
						<ul>
							<li ng-repeat="item in data.searchList track by $index">
								<p>
									<a class="add">添加</a>
									<span class="inner-name">{{item}}</span>
								</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 添加数据源弹框 -->
	<div class="ngdialog" id="dataDialog">
		<div class="ngdialog-content">
			<div class="ngdialog-title">添加数据源</div>
			<span class="ngdialog-cancel" ng-click="event.closeThisDialog()"></span>
			<div class="ngdialog-message">
				<ul>
					<li>
						<a>
							<span class="pic pic_1"></span>
							<span>Excel上传</span>
						</a>
					</li>
					<li>
						<a>
							<span class="pic pic_2"></span>
							<span>数据库连接</span>
						</a>
					</li>
					<li>
						<a>
							<span class="pic pic_3"></span>
							<span>多表关联</span>
						</a>
					</li>
					<li>
						<a>
							<span class="pic pic_4"></span>
							<span>SQL创建</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>